<template>
	<view class="wrap">
		<view class="header">
			<view class="left">
				<view>购物车数量 <text class="number">{{cartCount}}</text></view>
			</view>
			<view class="op" @click="switchManagerHandler" v-if="!switchManager">
				<image src='http://106.52.75.114/uploads/attach/2023/06/20230615/156201b67aecbd6af2dd7932facd55ef.png'
					class="icon"></image>
				<text>管理</text>
			</view>
			<view class="op" @click="switchManagerHandler" v-else>
				<text>取消</text>
			</view>
		</view>

		<scroll-view class="list-container" scroll-y="true">
			<view class="list">

				<u-empty v-if="cartList.length == 0" mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
				</u-empty>

				<view v-else class="item" v-for="ele in cartList" :key="ele.id">
					<view class="left" @click="toggle(ele)">
						<image v-if="!ele.isChecked"
							src="http://106.52.75.114/uploads/attach/2023/06/20230615/e41e51a4b66dbebb256179998f580d2c.png"
							mode="widthFix">
						</image>
						<image v-else
							src='http://106.52.75.114/uploads/attach/2023/06/20230615/f590013285b1f93bbc0cab67045debc1.png'>
						</image>

					</view>
					<view class="middle">
						<image :src="ele.productInfo.image" class="cover"></image>
						<view class="info">

							<view class="title">{{ele.productInfo.store_name}}</view>
							<!-- <view class="title">好玩又好用的手机机</view> -->
							<view class="attr">属性：{{ele.productInfo.attrInfo.suk}}</view>
							<view class="price">￥ {{ele.sum_price}}</view>
						</view>
					</view>
					<view class="right">
						<image @click="sub_add('sub',ele)"
							src="http://106.52.75.114/uploads/attach/2023/06/20230615/b8b35ac767920bcc6d98169ca2b20cd2.png"
							class="sub"></image>
						<text class="number">{{ele.cart_num}}</text>
						<image @click="sub_add('add',ele)"
							src="http://106.52.75.114/uploads/attach/2023/06/20230615/d48bbf2c3f1710033262c34894e2d979.png"
							class="add"></image>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="footer">
			<view class="left">
				<view class="check">
					<image class="icon" v-if="isAllSelect" @click="allChecked"
						src='http://106.52.75.114/uploads/attach/2023/06/20230615/f590013285b1f93bbc0cab67045debc1.png'>
					</image>
					<image v-else @click="allChecked" class="icon"
						src='http://106.52.75.114/uploads/attach/2023/06/20230615/e41e51a4b66dbebb256179998f580d2c.png'>
					</image>
					<text class="number">全选({{checkedCount}})</text>
					<!-- https://ext.dcloud.net.cn/plugin?id=1236 -->
					<!-- <evan-checkbox v-model="isSelecteAll"></evan-checkbox> -->
					<!-- <view class="totalCartCount">
                        全选(12)
                    </view> -->
				</view>
				<view class="total" v-show="switchManager == 0">
					<text class="n">￥ {{total_price}}</text>
				</view>
			</view>
			<view class="right" v-if="switchManager == 0" @click="toPay">去结算</view>
			<view class="right del-collect" v-else>
				<u-button type="primary" @click='collect_del_checked("collect")' :plain="true" :hairline="true"
					text="收藏" size="small">
				</u-button>
				<u-button type="error" @click='collect_del_checked("del")' :plain="true" :hairline="true" text="删除"
					size="small">
				</u-button>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		GetCartList,
		PostDelCart,
		CollectCart,
		check_shipping,
	} from '@/config/api.js'
	export default {
		data() {
			return {
				switchManager: 0,
				cartList: [],
				cartCount: 0,
				isAllSelect: true,
				checkedCount: 0,
			}
		},
		onShow() {
			if (!getApp().globalData.isLogin) {
				uni.showToast({
					title: '请登录',
					icon: 'none',
				})
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				this.getCartCount()
				this.getCartList()

			}
		},
		computed: {
			total_price() {
				return this.cartList.reduce((prev, item) => {
					if (item.isChecked)
						return prev + (item.sum_price * item.cart_num)
					else
						return prev
				}, 0)
			}
		},
		methods: {
			toPay() {
				let cartId = this.getCheckedIds()
				check_shipping({
					cartId,
					new: 0
				})
				uni.navigateTo({
					url: '/pages/buyNow/buyNow?cartId=' + cartId,
				})
			},
			getCheckedIds() {
				let checkedList = this.cartList.filter(v => v.isChecked == true)
				let ids = []
				checkedList.forEach(obj => {
					ids.push(obj.id)
				})
				return ids
			},
			async collect_del_checked(type) {
				let ids = this.getCheckedIds()


				if (type == 'del') {
					const res = await PostDelCart({
						"ids": ids
					})
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					})
					this.getCartList()
					this.getCartCount()

				} else if (type == 'collect') {
					const res = await CollectCart({
						"ids": ids,
						"category": "product"
					})
					uni.showToast({
						title: '收藏成功',
						icon: 'none'
					})
				}

			},
			allChecked() {
				this.isAllSelect = !this.isAllSelect
				this.cartList.forEach(v => {
					v.isChecked = this.isAllSelect
				})
				this.getCheckedCount()
			},
			sub_add(type, ele) {
				if (type == 'sub') {
					if (ele.cart_num > 1) ele.cart_num--
					else {
						uni.showToast({
							title: "至少买一件",
							icon: 'none'
						})
						return
					}
				} else {
					if (ele.cart_num < 99) ele.cart_num++
					else {
						uni.showToast({
							title: "至多买99件",
							icon: 'none'
						})
						return
					}
				}
				uni.request({
					url: 'https://shoptest1.52kfw.cn/api/cart/num',
					header: {
						'Authori-zation': 'Bearer ' + uni.getStorageSync('token')
					},
					method: 'POST',
					data: {
						"id": ele.id,
						"number": ele.cart_num
					},
					success: (res) => {
						this.getCartCount()
					}
				})

			},
			toggle(ele) {
				ele.isChecked = !ele.isChecked
				this.isAllSelect = this.cartList.every(v => {
					return v.isChecked == true
				})
				this.getCheckedCount()
			},
			getCheckedCount() {
				this.checkedCount = this.cartList.filter(v => v.isChecked == true).length
			},
			getCartCount() {
				uni.request({
					url: 'https://shoptest1.52kfw.cn/api/cart/count',
					header: {
						'Authori-zation': 'Bearer ' + uni.getStorageSync('token')
					},
					data: {
						"numType": 0
					},
					success: (res) => {
						// console.log('cartCount', res.data.data);
						this.cartCount = res.data.data.count

					}
				})
			},
			async getCartList() {
				// console.log('----------');
				const res = await GetCartList({
					params: {
						"numType": 0
					}
				})
				let tmp = res.data.valid
				tmp.forEach(v => {
					v.isChecked = true
				})
				this.cartList = tmp
				this.getCheckedCount()
			},
			switchManagerHandler() {
				this.switchManager = this.switchManager == 1 ? 0 : 1;
			}
		}
	}
</script>

<style lang="less" scoped>
	// page {
	// 	width: 100%;
	// 	height: 100%;
	// }

	// /deep/
	.evan-checkbox__label {
		color: #fff !important;
	}

	.totalCartCount {
		color: #fff !important;
		font-size: 28rpx;
	}

	/* #ifdef MP-WEIXIN */
	.wrap {
		width: 100%;
		padding-top: 84rpx;

		position: relative;


		.header {
			width: 100%;
			box-sizing: border-box;
			z-index: 10;
			display: flex;
			position: fixed;
			top: 0rpx;
			background-color: #fff;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #BBBFCD;
			padding: 22rpx 34rpx;
			height: 84rpx;

			.left {
				font-size: 28rpx;

				>view {
					font-weight: 700;
					color: #151F38;
				}

				.number {
					color: #F30A20;
					margin-left: 6rpx;

				}
			}

			.op {
				display: flex;
				align-items: center;

				.icon {
					width: 24rpx;
					height: 25rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 24rpx;
					color: #697080;

				}
			}
		}

		.list-container {
			height: calc(100vh - 84rpx - 94rpx -100rpx);
		}

		.list {
			padding: 0 40rpx;
			margin-top: 30rpx;

			>.item {
				margin: 30rpx 0;
				display: flex;
				align-items: center;

				.left {
					margin-right: 20rpx;
					width: 34rpx;
					height: 34rpx;

					image {
						width: 34rpx;
						height: 34rpx;
					}
				}

				.middle {
					display: flex;
					width: 540rpx;
					margin-right: 40rpx;

					.cover {
						width: 150rpx;
						height: 150rpx;
						margin-right: 16rpx;
					}

					.info {
						flex: 1;
						width: 300rpx;

						.title {
							font-size: 26rpx;
							font-weight: 700;
							color: #151F38;

							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;


						}

						.attr {
							font-size: 24rpx;
							color: #878C9A;
							margin-top: 4rpx;
							margin-bottom: 4rpx;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 1;
							-webkit-box-orient: vertical;

						}

						.price {
							font-size: 26rpx;
							color: #FF3A3A;

						}

					}

				}

				.right {
					width: 130rpx;
					justify-self: flex-end;
					display: flex;
					align-items: center;

					.sub,
					.add {
						width: 41rpx;
						height: 41rpx;

					}

					.number {
						margin: 0 16rpx;
						font-size: 26rpx;
						color: #0D182E;
					}

					.add {}

				}
			}
		}

		.footer {
			width: 100%;
			position: fixed;
			bottom: 0rpx;

			display: flex;
			height: 94rpx;

			>.left {
				flex: 3;
				background: #3C3C48;

				// padding: 55rpx 42rpx 18rpx 20rpx;
				box-sizing: border-box;

				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 55rpx;
				padding-right: 20rpx;
				padding-bottom: 20rpx;
				padding-top: 20rpx;

				.check {
					display: flex;
					align-items: center;

					.icon {
						width: 34rpx;
						height: 34rpx;
					}

					>.number {
						font-size: 24rpx;
						color: #ADADB0;
						margin-left: 14rpx;
					}
				}

				.total {
					display: flex;
					flex-direction: column;

					.n {

						font-size: 30rpx;
						color: #fff;
						margin-bottom: 4rpx;

					}

					.minus {
						font-size: 24rpx;
						color: #B4B4B7;
					}
				}

			}

			>.right {
				flex: 3;
				background: #94CF39;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 28rpx;
			}

			>.del-collect {
				background-color: #3C3C48;
			}

		}
	}

	/* #endif */

	/* #ifdef H5 */
	.wrap {
		width: 100%;
		padding-top: 84rpx;

		position: relative;


		.header {
			width: 100%;
			box-sizing: border-box;
			z-index: 10;
			display: flex;
			position: fixed;
			top: 84rpx;
			background-color: #fff;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #BBBFCD;
			padding: 22rpx 34rpx;
			height: 84rpx;

			.left {
				font-size: 28rpx;

				>view {
					font-weight: 700;
					color: #151F38;
				}

				.number {
					color: #F30A20;
					margin-left: 6rpx;

				}
			}

			.op {
				display: flex;
				align-items: center;

				.icon {
					width: 24rpx;
					height: 25rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 24rpx;
					color: #697080;

				}
			}
		}

		.list-container {
			height: calc(100vh - 84rpx - 94rpx -100rpx);
		}

		.list {
			padding: 0 40rpx;
			margin-top: 30rpx;

			>.item {
				margin: 30rpx 0;
				display: flex;
				align-items: center;

				.left {
					margin-right: 20rpx;
					width: 34rpx;
					height: 34rpx;

					image {
						width: 34rpx;
						height: 34rpx;
					}
				}

				.middle {
					display: flex;
					width: 540rpx;
					margin-right: 40rpx;

					.cover {
						width: 150rpx;
						height: 150rpx;
						margin-right: 16rpx;
					}

					.info {
						flex: 1;
						width: 300rpx;

						.title {
							font-size: 26rpx;
							font-weight: 700;
							color: #151F38;

							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;


						}

						.attr {
							font-size: 24rpx;
							color: #878C9A;
							margin-top: 4rpx;
							margin-bottom: 4rpx;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 1;
							-webkit-box-orient: vertical;

						}

						.price {
							font-size: 26rpx;
							color: #FF3A3A;

						}

					}

				}

				.right {
					width: 130rpx;
					justify-self: flex-end;
					display: flex;
					align-items: center;

					.sub,
					.add {
						width: 41rpx;
						height: 41rpx;

					}

					.number {
						margin: 0 16rpx;
						font-size: 26rpx;
						color: #0D182E;
					}

					.add {}

				}
			}
		}

		.footer {
			width: 100%;
			position: fixed;
			bottom: 100rpx;

			display: flex;
			height: 94rpx;

			>.left {
				flex: 3;
				background: #3C3C48;

				// padding: 55rpx 42rpx 18rpx 20rpx;
				box-sizing: border-box;

				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 55rpx;
				padding-right: 20rpx;
				padding-bottom: 20rpx;
				padding-top: 20rpx;

				.check {
					display: flex;
					align-items: center;

					.icon {
						width: 34rpx;
						height: 34rpx;
					}

					>.number {
						font-size: 24rpx;
						color: #ADADB0;
						margin-left: 14rpx;
					}
				}

				.total {
					display: flex;
					flex-direction: column;

					.n {

						font-size: 30rpx;
						color: #fff;
						margin-bottom: 4rpx;

					}

					.minus {
						font-size: 24rpx;
						color: #B4B4B7;
					}
				}

			}

			>.right {
				flex: 3;
				background: #94CF39;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 28rpx;
			}

			>.del-collect {
				background-color: #3C3C48;
			}

		}
	}

	/* #endif */
</style>